/*
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

@import '../commons/index.css';

:root {
  /* The diameter of the marker */
  --spectrum-steplist-marker-diameter-small: 8px;
  --spectrum-steplist-marker-diameter-medium: 16px;
  --spectrum-steplist-marker-diameter-large: 24px;
  --spectrum-steplist-marker-diameter-xlarge: 32px;

  /* The width of the border */
  --spectrum-steplist-marker-border-width: 2px;
  --spectrum-steplist-marker-total-border-width: calc(var(--spectrum-steplist-marker-border-width) * 4);

  /* The height of the line */
  --spectrum-steplist-segment-height: 2px;

  /* Distance between step list items */
  --spectrum-steplist-chevron-gap-small: 10px;
  --spectrum-steplist-chevron-gap-medium: 16px;
  --spectrum-steplist-chevron-gap-large: 20px;
  --spectrum-steplist-chevron-gap-xlarge: 24px;

  /* Distance between marker and label */
  --spectrum-steplist-marker-label-gap-small: 10px;
  --spectrum-steplist-marker-label-gap-medium: 12px;
  --spectrum-steplist-marker-label-gap-large: 14px;
  --spectrum-steplist-marker-label-gap-xlarge: 16px;

  /* The distance between steps in vertical  */
  --spectrum-steplist-vertical-separation: 32px;

}

.spectrum-Steplist {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
}

.spectrum-Steplist-item {
  display: grid;
  min-width: 0;

  .spectrum-Steplist-segment {
    align-items: center;
    display: inline-flex;

    &.is-completed {
      svg line {
        stroke-dasharray: none;
      }
    }
  }

  .spectrum-Steplist-chevron {
    &.is-reversed {
      transform: scaleX(-1);
    }
  }
}

.spectrum-Steplist-link {
  cursor: default;
  display: grid;
  text-decoration: none;
  outline: none;

  .spectrum-Steplist-markerWrapper {
    grid-area: marker;
  }
  .spectrum-Steplist-marker {
    box-sizing: border-box; /* So we can stroke nicely */
    border-radius: 50%;
    border-style: solid;
    border-width: var(--spectrum-steplist-marker-border-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  .spectrum-Steplist-label {
    grid-area: label;
  }

  /* Completed State */
  &.is-completed {
    .spectrum-Steplist-marker {
      border-style: none;
      border-width: 0;
    }
  }

  /* Selected state */
  &.is-selected {
   .spectrum-Steplist-marker {
     border-style: none;
     border-width: 0;
    }
  }

  &.is-hovered {
    &.is-completed .spectrum-Steplist-marker {
      border-style: none;
      border-width: 0;
    }
  }
}

.spectrum-Steplist {
  font-size: var(--spectrum-steplist-font-size);
  gap: var(--spectrum-steplist-chevron-gap);

  .spectrum-Steplist-link {
    gap: var(--spectrum-steplist-marker-label-gap);

    .spectrum-Steplist-marker {
      width: var(--spectrum-steplist-marker-diameter);
      height: var(--spectrum-steplist-marker-diameter);
      font-size: var(--spectrum-steplist-counter-font-size);
      padding-block-end: 1px;
    }
  }
  .spectrum-Steplist-chevron {
    transform: scale(var(--spectrum-steplist-chevron-scale));
  }
}

/* Small size */
.spectrum-Steplist--small {
  --spectrum-steplist-font-size: var(--spectrum-global-dimension-font-size-75);
  --spectrum-steplist-chevron-gap: var(--spectrum-steplist-chevron-gap-small);
  --spectrum-steplist-marker-label-gap: var(--spectrum-steplist-marker-label-gap-small);
  --spectrum-steplist-marker-diameter: var(--spectrum-steplist-marker-diameter-small);
  --spectrum-steplist-counter-font-size: 0;
  --spectrum-steplist-chevron-scale: 0.75;
  --spectrum-steplist-segment-height-adjust: -4px;
  .spectrum-Steplist-marker {
    padding-top: 1px;
  }
  &.spectrum-Steplist--horizontal {
    /* Tweaks for vertical centering. */
    .spectrum-Steplist-marker {
      margin-top: 1px;
    }

    .spectrum-Steplist-chevron {
      padding-top: 2px;
    }
  }
}

/* Medium size */
.spectrum-Steplist--medium {
  --spectrum-steplist-font-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-steplist-chevron-gap: var(--spectrum-steplist-chevron-gap-medium);
  --spectrum-steplist-marker-label-gap: var(--spectrum-steplist-marker-label-gap-medium);
  --spectrum-steplist-marker-diameter: var(--spectrum-steplist-marker-diameter-medium);
  --spectrum-steplist-counter-font-size: var(--spectrum-global-dimension-font-size-75);
  --spectrum-steplist-chevron-scale: 1;
  --spectrum-steplist-segment-height-adjust: 0px;
}

/* Large size */
.spectrum-Steplist--large {
  --spectrum-steplist-font-size: var(--spectrum-global-dimension-font-size-200);
  --spectrum-steplist-chevron-gap: var(--spectrum-steplist-chevron-gap-large);
  --spectrum-steplist-marker-label-gap: var(--spectrum-steplist-marker-label-gap-large);
  --spectrum-steplist-marker-diameter: var(--spectrum-steplist-marker-diameter-large);
  --spectrum-steplist-counter-font-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-steplist-chevron-scale: 1.25;
  --spectrum-steplist-segment-height-adjust: 6px;
}

/* XLarge size */
.spectrum-Steplist--xlarge {
  --spectrum-steplist-font-size: var(--spectrum-global-dimension-font-size-300);
  --spectrum-steplist-chevron-gap: var(--spectrum-steplist-chevron-gap-xlarge);
  --spectrum-steplist-marker-label-gap: var(--spectrum-steplist-marker-label-gap-xlarge);
  --spectrum-steplist-marker-diameter: var(--spectrum-steplist-marker-diameter-xlarge);
  --spectrum-steplist-counter-font-size: var(--spectrum-global-dimension-font-size-200);
  --spectrum-steplist-chevron-scale: 1.5;
  --spectrum-steplist-segment-height-adjust: 6px;
}

/* Last step overrides */
.spectrum-Steplist-item:last-child {
  .spectrum-Steplist-segment {
    /* Not visible for last step */
    display: none;
  }
}

/* horizontal version */
.spectrum-Steplist--horizontal {
  .spectrum-Steplist-link {
    display: flex;
    align-items: baseline;
  }

  .spectrum-Steplist-segment {
    order: 2;
    display: flex;
    align-items: center;

    padding-inline-start: calc(var(--spectrum-steplist-chevron-gap) - var(--spectrum-steplist-marker-label-gap));
    &::before {
      content: "*";
      width: 0;
      visibility: hidden;
    }
  }

  .spectrum-Steplist-chevron {
    /* Aides vertical centering between chevron and circle. */
    padding-top: 1px;
  }

  .spectrum-Steplist-label {
    order: 1;
  }

  .spectrum-Steplist-markerWrapper {
    order: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    &::before {
      content: "*";
      width: 0;
      visibility: hidden;
    }
  }

  .spectrum-Steplist-segmentLine {
    display: none;
  }
}


/* vertical version */
.spectrum-Steplist--vertical {
  flex-direction: column;
  column-gap: 2px;
  row-gap: 0;

  .spectrum-Steplist-item {
    list-style: none;
    display: unset;
  }
  .spectrum-Steplist-link {
    display: grid;
    grid-template-areas: "marker label"
                         "line   label";
    grid-template-columns: minmax(0, min-content) 1fr;
    grid-template-rows: minmax(16px, min-content) 1fr;
    justify-items: start;
    column-gap: 6px;
    row-gap: 0px;
  }
  .spectrum-Steplist-chevron {
    display: none;
  }
  .spectrum-Steplist-markerWrapper {
    align-self: baseline;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    &::before {
      content: "*";
      width: 0;
      visibility: hidden;
    }
  }
  &.spectrum-Steplist--small {
    .spectrum-Steplist-marker {
      align-self: center;
    }
  }
  .spectrum-Steplist-label {
    align-self: baseline;
    /* pushes elements too far apart if we don't set this, it doesn't cut off descenders/ascenders */
    line-height: 16px;
    min-width: 0;
    min-height: 0;
  }
  .spectrum-Steplist-segment {
    grid-area: line;
    justify-self: center;
    box-sizing: content-box;
    min-height: var(--spectrum-steplist-vertical-separation);
    width: 2px;
    pointer-events: none;
    min-width: 0;

    .spectrum-Steplist-segmentLine {
      /* don't cut off the rounded linecap, but also line must go exactly to the edges
       so that we don't scale the gap at each edge of the svg
       */
      overflow: visible;
      width: 2px;
      height: calc(100% - var(--spectrum-steplist-segment-height-adjust));

      & line {
        stroke-width: 2px;
        stroke-dasharray: 6 4;
        stroke-linecap: round;
      }
    }
  }

  /* Last step overrides */
  .spectrum-Steplist-item:last-child {
    .spectrum-Steplist-link {
      grid-template-areas: "marker label";
      grid-template-rows: minmax(16px, min-content);
    }
  }
}
